<template>
  <div class="home">
    <div class="wrapper">
      <div class="header" v-if="showSearch">
        <el-form :inline="true" size="small">
          <el-form-item label="选择位置: ">
            <el-cascader
              ref="spaceRef"
              v-model="spaces"
              :options="options"
              :props="props"
              collapse-tags
              clearable
              @change="spacesChange"
            />
          </el-form-item>
          <el-form-item label="选择时间: ">
            <el-date-picker
              v-model="datetime"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="选择日期"
              @change="dateChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="areas">
        <div class="area" v-for="(item, index) in zones" :key="index">
          <div class="area-name">{{ item.name }}</div>
          <div class="area-nums">回焊炉数量: {{ item.eqCount }}台</div>
          <div class="area-data">
            <div class="data-detail">
              <div class="detail-head">炉温状况</div>
              <div class="detail-data">
                <div class="data-health">
                  <div class="data-key">健康率</div>
                  <div class="data-val">{{ 100 * item.rtZoneFine / ((item.rtZoneFine + item.rtZoneSick) ? item.rtZoneFine + item.rtZoneSick : 1) }}%</div>
                </div>
                <div class="data-normal">
                  <div class="data-key">健康</div>
                  <div class="data-val">{{ item.rtZoneFine }}</div>
                </div>
                <div class="data-abnormal">
                  <div class="data-key">异常</div>
                  <div class="data-val">{{ item.rtZoneSick }}</div>
                </div>
              </div>
            </div>
            <div class="data-detail">
              <div class="detail-head">含氧量状况</div>
              <div class="detail-data">
                <div class="data-health">
                  <div class="data-key">健康率</div>
                  <div class="data-val">{{ 100 * item.rtcsFine / ((item.rtcsFine + item.rtcsSick) ? (item.rtcsFine + item.rtcsSick) : 1) }}%</div>
                </div>
                <div class="data-normal">
                  <div class="data-key">健康</div>
                  <div class="data-val">{{ item.rtcsFine }}</div>
                </div>
                <div class="data-abnormal">
                  <div class="data-key">异常</div>
                  <div class="data-val">{{ item.rtcsSick }}</div>
                </div>
              </div>
            </div>
            <div class="data-detail">
              <div class="detail-head">风速状况</div>
              <div class="detail-data">
                <div class="data-health">
                  <div class="data-key">健康率</div>
                  <div class="data-val">{{ 100 * item.oxyAnaFine / ((item.oxyAnaFine + item.oxyAnaSick) ? (item.oxyAnaFine + item.oxyAnaSick) : 1) }}%</div>
                </div>
                <div class="data-normal">
                  <div class="data-key">健康</div>
                  <div class="data-val">{{ item.oxyAnaFine }}</div>
                </div>
                <div class="data-abnormal">
                  <div class="data-key">异常</div>
                  <div class="data-val">{{ item.oxyAnaSick }}</div>
                </div>
              </div>
            </div>
            <div class="data-detail">
              <div class="detail-head">链速状况</div>
              <div class="detail-data">
                <div class="data-health">
                  <div class="data-key">健康率</div>
                  <div class="data-val">{{ 100 * item.fanAnaFine / ((item.fanAnaFine + item.fanAnaSick) ? (item.fanAnaFine + item.fanAnaSick) : 1) }}%</div>
                </div>
                <div class="data-normal">
                  <div class="data-key">健康</div>
                  <div class="data-val">{{ item.fanAnaFine }}</div>
                </div>
                <div class="data-abnormal">
                  <div class="data-key">异常</div>
                  <div class="data-val">{{ item.fanAnaSick }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <info-card v-for="(item, index) in datas" :key="index" :infos="item" :date="datetime" />
    </div>
  </div>
</template>

<script>
import InfoCard from './components/InfoCard.vue'
import { getMonitor } from '@/api/datainterface'
import { getNowDate } from '@/utils/index'
import { getValue, setValue} from '@/utils/auth'
import { encrypto } from '@/utils/crypto'

export default {
  name: 'Main',
  components: {
    InfoCard
  },
  data() {
    return {
      spaceID: 0,
      datetime: '',
      props: {
        multiple: false,
        lazy: false,
        checkStrictly: true,
      },
      organizations: [],
      furnaces: [],
      statuses: [],
      spaces: [],
      datas: [],
      zones: [],
    }
  },
  created() {
    const func = () => {
      this.spaceID = this.$store.state.datainterface.spaceId;
      this.datetime = this.$store.state.datainterface.homeTime;
      if (this.datetime == '') 
        this.datetime = getNowDate()
      if (this.spaceID == null) 
        this.spaceID = parseInt(getValue("spaceID"))
      if (this.options.length > 0) {
        this.spaces = this.getModel(this.spaceID);
        setValue("space", this.getSpace(this.spaceID));
        if (this.spaceID != 0 && this.datetime != '') {
          this.search();
        }
      }
    }
    func();
    setInterval(() => {
      this.search()
    }, 60000 * 5)
  },
  watch:{
    options() {
      this.spaces = this.getModel(this.spaceID);
      setValue("space", this.getSpace(this.spaceID));
      if (this.spaceID != 0 && this.datetime != '') {
        this.search()
      }
    }
  },
  computed: {
    showSearch() {
      return this.$store.state.settings.showSearch
    },
    options() {
      return this.$store.state.space.options
    },
    monitors() {
      return this.$store.state.datainterface.monitors
    },
    zoneMonitors() {
      return this.$store.state.datainterface.zoneMonitors
    },
  },
  mounted() {
    if (this.options.length == 0) {
      this.$store.dispatch('space/GetSpaces', 
      { 
        name: '', parentid: '', page: 0, size: 0 
      })
    }
  },
  destroyed() {
  },
  methods: {
    async search() {
      this.datas = []
      this.zones = []
      const params = { spaceId: this.spaceID, date: this.datetime, flag: 1 }
      await this.$store.dispatch('datainterface/ZoneMonitors', params)
      this.zoneMonitors.forEach(e => {
        this.zones.push(e)
        e.equipData.forEach(ee => {
          this.datas.push(this.getMonitorInfo(ee))
        })
      })
    },
    spacesChange(val) {
      this.spaceID = val[val.length - 1]
      this.$store.dispatch('datainterface/SetSpaceId', this.spaceID)
      setValue("spaceID", this.spaceID)
      setValue("space", this.getSpace(this.spaceID));
    },
    dateChange(val) {
      this.$store.dispatch('datainterface/SetHomeTime', val)
    },
    getState(state) {
      switch (state) {
        case 0: return '异常'
        case 1: return '告警'
        case 2: return '正常'
        default: return '未监控'
      }
    },
    getClass(clazz) {
      return clazz == 2 ? 'info' : 'info-warn';
    },
    getMonitorInfo(monitor) {
      let per = 0.0;
      if (monitor.proCount > 0) {
        Performance = monitor.proCount / (monitor.errCount + monitor.proCount)
      }
      return {
        eqid: monitor.id,
        titleClass: monitor.havMonitor ? 'right-title' : 'right-title-warn',
        // 窗口信息
        name: monitor.name,
        info: monitor.havMonitor ? '正常监控' : '未监控',
        // 合格率
        contentClass: monitor.havMonitor == 1 ? 'content-card' : 'content-card-warn',
        nums: monitor.proCount ? monitor.proCount : 0,
        errs: monitor.errCount ? monitor.errCount : 0,
        percent: per * 100 + '%',
        // 数据信息
        temp: this.getState(monitor.rtZoneAnaInfoSpec),
        tempClass: monitor.rtZoneAnaInfoSpec == 2 ? 'info' : 'info-warn',
        wheel: this.getState(monitor.rtcsAnaInfoSpec),
        wheelClass: monitor.rtcsAnaInfoSpec == 2 ? 'info' : 'info-warn',
        oxygen: monitor.rtcsAnaInfoSpec == 2 ? monitor.oxyAnaInfoSpecValue??0 : 0,
        oxygenClass: monitor.oxyAnaInfoSpec == 2 ? 'info' : 'info-warn',
        elefan: this.getState(monitor.fanAnaInfoSpec),
        elefanClass: monitor.fanAnaInfoSpec == 2 ? 'info' : 'info-warn',
        chart: monitor.equipmentStatus == 2 ? monitor.proCount??0 : 0,
        chartClass: monitor.equipmentStatus == 2 ? 'info' : 'info-warn',
        warn: '无',
        warnClass: monitor.rtZoneAnaInfoSpec == 2 ? 'info' : 'info-warn'
      };
    },
    getModel(id) {
      let model = [];
      let isFind = 0;
      const func = (id, arr, h) => {
        arr.forEach(e => {
          if (isFind) {
            return;
          }
          while (model.length > h) {
            model.pop();
          }
          if (e.value == id) {
            isFind = 1;
            model.push(e.value);
            return;
          } else if (e.children) {
            model.push(e.value);
            func(id, e.children, h + 1);
          }
        })
      }
      func(id, this.options, 0);
      return model;
    },
    getSpace(id) {
      let model = [];
      let isFind = 0;
      const func = (id, arr, h) => {
        arr.forEach(e => {
          if (isFind) {
            return;
          }
          while (model.length > h) {
            model.pop();
          }
          if (e.value == id) {
            isFind = 1;
            model.push(e.label);
            return;
          } else if (e.children) {
            model.push(e.label);
            func(id, e.children, h + 1);
          }
        })
      }
      func(id, this.options, 0);
      let space = model + "";
      return space.replaceAll(",", "/");
    },
  }
}
</script>

<style lang="scss" scoped>
$back_black: #111320;
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    padding: 5px;
}

.home {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background: $back_black;
  .wrapper {
    .header {
      padding-top: 15px;
      margin-left: 20px;
    }
    .areas {
      display: flex;
      flex-direction: row;
      color: lightgray;
      font-size: 8px;
      background: #262c3c;
      margin: 10px;
      border-right: gray solid 1px;
      .area-name {
        display: block;
        border-top: gray solid 1px;
        border-left: gray solid 1px;
        border-bottom: gray solid 1px;
        padding: 5px;
      }
      .area-nums {
        @extend .area-name;
        border-top: none;
      }
      .area-data {
        display: flex;
        flex-direction: row;
        .data-detail {
          flex: 1;
          display: flex;
          flex-direction: column;
          border-left: gray solid 1px;
          border-bottom: gray solid 1px;
          .detail-head {
            display: block;
            text-align: center;
            border-bottom: gray solid 1px;
            padding: 5px 0;
          }
          .detail-data {
            display: flex;
            flex-direction: row;
            text-align: center;
            .data-health {
              flex: 1;
              display: flex;
              flex-direction: column;
              .data-key {
                border-bottom: gray solid 1px;
                padding: 3px 0;
                flex: 1;
              }
              .data-val {
                padding: 3px 0;
                flex: 1;
              }
            }
            .data-normal {
              @extend .data-health;
              border-left: gray solid 1px;
            }
            .data-abnormal {
              @extend .data-normal;
            }
          }
        }
      }
      .area {
        display: inline-block;
        flex: 1;
      }
    }
    .home-context {
      min-height: 90vh;
      display: flex;
      justify-content: center;
        align-items: center;
      span {
        color: white;
        font-size: 32px;
        text-align: center;
      }
    }
  }
}
</style>
